<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
const container = ref<HTMLElement | null>(null)
const defaultThreshold = 100 // 固定值
const handleScroll = () => {
    if (!container.value) return
    const rect = container.value.getBoundingClientRect()
    const isVisible = rect.top < window.innerHeight - defaultThreshold
    container.value.style.opacity = isVisible ? '1' : '0'
    container.value.style.transform = isVisible ? 'translateY(0)' : 'translateY(30px)'
}
onMounted(() => {
    window.addEventListener('scroll', handleScroll)
    handleScroll() // 初始化检查
})
onUnmounted(() => {
    window.removeEventListener('scroll', handleScroll)
})
</script>

<template>
    <div ref="container" class="scroll-wrapper">
        <slot></slot>
    </div>
</template>

<style scoped>
.scroll-wrapper {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.9s linear;
}
</style>